<template>
<div class="app-container">
  <app-header ref="a"/>
  <button @click="fn">change</button>
  <message>
    <span slot="a">hello,world!</span>
    <span slot="b">2312345662133134</span>
    <span slot="c">hi,world!</span>
  </message>
  <app-footer ref="b"/>
</div>
</template>

<script>
import appHeader from './components/app-header';
import appFooter from './components/app-footer';

export default {
  name: 'App',
  data() {
    return {};
  },
  methods: {
    fn() {
      this.$refs.a.msg = 123;
      this.$refs.b.msg = 345;
    },
  },
  components: { appHeader, appFooter },
};
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .app-container{
    width: 100vw;
    height: 100vh;
  }
</style>
